<p class="com-title">
	安全中心
</p>
<div id="safeCenterTabs" class="HuiTab uc-tabs">
	<div class="tabBar clearfix">
  		<span>账号安全</span>
  		<span>账号绑定</span>
  	</div>
  	<div class="tabCon">
  		<ul class="id-safe mt-20">
  			<li class="cl">
  				<span class="f-l per20"><b>邮箱登录</b></span>
  				<span class="f-l per50 c-primary">5864****5@qq.com</span>
  				<span class="f-l per30 text-r">
  					<a class="status"><i class="c-danger Hui-iconfont Hui-iconfont-close"></i>未验证</a>
  					<a class="c-primary">验证</a>
  					<a class="c-primary" onclick="editEmail()">修改</a>
  				</span>
  			</li>
  			<li class="cl">
  				<span class="f-l per20"><b>手机号码</b></span>
  				<span class="f-l per50 c-primary">137****5468</span>
  				<span class="f-l per30 text-r">
  					<a class="status"><i class="c-success Hui-iconfont Hui-iconfont-xuanze"></i>已验证</a>
  					<a class="c-primary" onclick="editPhone()">修改</a>
  				</span>
  			</li>
  			<li class="cl">
  				<span class="f-l per20"><b>修改密码</b></span>
  				<span class="f-l per50">
  					&nbsp;
  				</span>
  				<span class="f-l per30 text-r">
  					<a class="c-primary" onclick="editPassword()">修改</a>
  				</span>
  			</li>
  		</ul>
  	</div>
  	<div class="tabCon">
		<div class="Huialert Huialert-info mt-20">绑定后，您可以使用以下登录方式登录安通厂房网</div>
  		<ul class="id-bind mt-20">
  			<li class="cl">
  				<span class="f-l per20">
  					<img src="images/qq.png" class="bind-logo"/>
  					<b>QQ帐号</b>
  				</span>
  				<span class="f-l per50 text-c">
  					<a class="status"><i class="c-danger Hui-iconfont Hui-iconfont-close"></i>未绑定</a>
  				</span>
  				<span class="f-l per30 text-r">
  					<a class="c-primary">绑定</a>
  				</span>
  			</li>
  			<li class="cl">
  				<span class="f-l per20">
  					<img src="images/weixin.png" class="bind-logo"/>
  					<b>微信账号</b>
  				</span>
  				<span class="f-l per50 text-c">
  					<a class="status"><i class="c-danger Hui-iconfont Hui-iconfont-close"></i>未绑定</a>
  				</span>
  				<span class="f-l per30 text-r">
  					<a class="c-primary">绑定</a>
  				</span>
  			</li>
  			<li class="cl">
  				<span class="f-l per20">
  					<img src="images/weibo.png" class="bind-logo"/>
  					<b>微博账号</b>
  				</span>
  				<span class="f-l per50 text-c">
  					<a class="status"><i class="c-danger Hui-iconfont Hui-iconfont-close"></i>未绑定</a>
  				</span>
  				<span class="f-l per30 text-r">
  					<a class="c-primary">绑定</a>
  				</span>
  			</li>
  		</ul>
  	</div>
</div>

<div id="editEmail" class="modal fade" tabindex="-1" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content radius">
			<div class="modal-header">
				<h3 class="modal-title">修改邮箱</h3>
				<a class="close" data-dismiss="modal" href="javascript:void();">×</a>
			</div>
			<div class="modal-body">
				<form class="site-selection-form form form-horizontal no-border">
					<div class="row cl">
						<label class="form-label per35">
							登录邮箱：
						</label>
						<div class="formControls per60">
							<span>5864****5@qq.com</span>
						</div>
					</div>
					<div class="row cl">
						<label class="form-label per35">
							登录密码：
						</label>
						<div class="formControls per40">
							<input type="text" name="" class="input-text size-M" placeholder="请输入登录密码">
						</div>
					</div>
					<div class="row cl">
						<label class="form-label per35">
							新邮箱：
						</label>
						<div class="formControls per40">
							<input type="text" name="" class="input-text size-M" placeholder="请输入新的登录邮箱">
						</div>
					</div>
					<div class="row cl">
						<label class="form-label per35">
							验证码：
						</label>
						<div class="formControls per40">
							<span class="f-l per30">
								<input type="text" name="" class="input-text size-M">
							</span>
							<img src="images/user-face.gif" class="per30 validate-code"/>
							<a class="c-primary mt-10 f-12">看不清验证码?</a>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button class="btn btn-primary">修改</button>
				<button class="btn" data-dismiss="modal">取消</button>
			</div>
		</div>
	</div>
</div>

<div id="editPhone" class="modal fade" tabindex="-1" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content radius">
			<div class="modal-header">
				<h3 class="modal-title">修改手机号</h3>
				<a class="close" data-dismiss="modal" href="javascript:void();">×</a>
			</div>
			<div class="modal-body">
				<form class="site-selection-form form form-horizontal no-border">
					<div class="row cl">
						<label class="form-label per35">
							手机号码：
						</label>
						<div class="formControls per40">
							<input type="text" name="" class="input-text size-M" placeholder="137****5468">
						</div>
					</div>
					<div class="row cl">
						<label class="form-label per35">
							验证码：
						</label>
						<div class="formControls per40">
							<span class="f-l per40">
								<input type="text" name="" class="input-text size-M">
							</span>
							<button type="button" class="btn btn-primary-outline f-l ml-10 radius">获取验证码</button>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button class="btn btn-primary">修改</button>
				<button class="btn" data-dismiss="modal">取消</button>
			</div>
		</div>
	</div>
</div>

<div id="editPassword" class="modal fade" tabindex="-1" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content radius">
			<div class="modal-header">
				<h3 class="modal-title">修改密码</h3>
				<a class="close" data-dismiss="modal" href="javascript:void();">×</a>
			</div>
			<div class="modal-body">
				<form class="site-selection-form form form-horizontal no-border">
					<div class="row cl">
						<label class="form-label per35">
							旧密码：
						</label>
						<div class="formControls per40">
							<input type="text" name="" class="input-text size-M" placeholder="请输入登录密码">
						</div>
					</div>
					<div class="row cl">
						<label class="form-label per35">
							新密码：
						</label>
						<div class="formControls per40">
							<input type="text" name="" class="input-text size-M" placeholder="6-18位字母、数字，不支持空格">
						</div>
					</div>
					<div class="row cl">
						<label class="form-label per35">
							重复新密码：
						</label>
						<div class="formControls per40">
							<input type="text" name="" class="input-text size-M" placeholder="请输入新的登录邮箱">
						</div>
					</div>
					<div class="row cl">
						<label class="form-label per35">
							验证码：
						</label>
						<div class="formControls per40">
							<span class="f-l per30">
								<input type="text" name="" class="input-text size-M">
							</span>
							<img src="images/user-face.gif" class="per30 validate-code"/>
							<a class="c-primary mt-10 f-12">看不清验证码?</a>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button class="btn btn-primary">修改</button>
				<button class="btn" data-dismiss="modal">取消</button>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	$("#safeCenterTabs").Huitab({
		index:0
	});
	function editEmail(){
		$("#editEmail").modal("show")
	}
	function editPhone(){
		$("#editPhone").modal("show")
	}
	function editPassword(){
		$("#editPassword").modal("show")
	}
</script>